<template>
  <a-card :bordered="false">
    <template v-if="departId">
      <a-spin :spinning="loading">
        <a-form>
          <a-form-item label='所拥有的权限'>
            <a-tree
              checkable
              @check="onCheck"
              :checkedKeys="checkedKeys"
              :treeData="treeData"
              @expand="onExpand"
              @select="onTreeNodeSelect"
              :selectedKeys="selectedKeys"
              :expandedKeys="expandedKeysss"
              :checkStrictly="checkStrictly"
              style="height:500px;overflow: auto;">
              <span slot="hasDatarule" slot-scope="{slotTitle,ruleFlag}">
                {{ slotTitle }}
                <!-- <a-icon v-if="ruleFlag" type="align-left" style="margin-left:5px;color: red;"></a-icon> -->
              </span>
            </a-tree>
          </a-form-item>
        </a-form>
      </a-spin>
      <div class="anty-form-btn">
        <!-- <a-dropdown style="float: left" :trigger="['click']" placement="topCenter">
          <a-menu slot="overlay">
            简化Tree逻辑，使用默认checkStrictly为false的行为，即默认父子关联
            <a-menu-item key="1" @click="switchCheckStrictly(1)">父子关联</a-menu-item>
            <a-menu-item key="2" @click="switchCheckStrictly(2)">取消关联</a-menu-item>
           
            <a-menu-item key="3" @click="checkALL">全部勾选</a-menu-item>
            <a-menu-item key="4" @click="cancelCheckALL">取消全选</a-menu-item>
            <a-menu-item key="5" @click="expandAll">展开所有</a-menu-item>
            <a-menu-item key="6" @click="closeAll">合并所有</a-menu-item>
          </a-menu>
          <a-button>
            树操作 <a-icon type="up" />
          </a-button>
        </a-dropdown> -->
        <a-button style="float: right" @click="handleSubmit" type="primary" htmlType="button" icon="form">保存</a-button>
      </div>
    </template>
    <a-card v-else :bordered="false" style="height:200px">
      <a-empty>
        <span slot="description"> 请先选择一个部门! </span>
      </a-empty>
    </a-card>
    <!-- <depart-datarule-modal ref="datarule"/> -->
  </a-card>
</template>

<script>
  import {queryTreeListForRole,queryDepartPermission,saveDepartPermission} from '@/api/api'
  // import DepartDataruleModal from './DepartDataruleModal'

  export default {
    name: 'DepartAuthModal',
    // components: { DepartDataruleModal },
    data(){
      return {
        departId:"",
        treeData: [],
        defaultCheckedKeys:[],
        checkedKeys:[],
        expandedKeysss:[],
        allTreeKeys:[],
        checkStrictly: true,
        title:"部门权限配置",
        loading: false,
        selectedKeys:[]
      }
    },
    methods: {
      onTreeNodeSelect(id){
        if(id && id.length>0){
          this.selectedKeys = id
        }
        // this.$refs.datarule.show(this.selectedKeys[0],this.departId)
      },
      onCheck (o) {
        if(this.checkStrictly){
          this.checkedKeys = o.checked;
        }else{
          this.checkedKeys = o
        }
        this.$emit('change', this.checkedKeys);
      },
      show(record){
        this.departId = record.id;
        this.loadData();
      },
      onExpand(expandedKeys){
        this.expandedKeysss = expandedKeys;
      },
      // expandAll () {
      //   this.expandedKeysss = this.allTreeKeys
      // },
      // closeAll () {
      //   this.expandedKeysss = []
      // },
      // checkALL () {
      //   this.checkedKeys = this.allTreeKeys
      // },
      // cancelCheckALL () {
      //   this.checkedKeys = []
      // },
      handleSubmit() {
        let that = this;
        if(!that.departId){
          this.$message.warning('请点击选择一个部门!')
        }
        const permissionIds = this.checkedKeys.join(",")
        let params =  {
          departId: that.departId,
          permissionIds,
          lastpermissionIds: that.defaultCheckedKeys.join(","),
        };
        that.loading = true;
        saveDepartPermission(params).then((res)=>{
          if(res.success){
            that.$message.success(res.message);
            that.loadData();
          }else {
            that.$message.warning(res.message);
          }
        }).finally(() => {
          that.loading = false;
        })
      },
      loadData(){
        this.loading = true;
        queryTreeListForRole().then((res) => {
          if(res.success){
            this.treeData = res.result && res.result.treeList
            this.allTreeKeys = res.result && res.result.ids
            queryDepartPermission({departId: this.departId}).then((res_)=>{
              if(res_.success){
                this.checkedKeys = [...res_.result];
                this.defaultCheckedKeys = [...res_.result];
              }else{
                this.$message.warning(res_.message);
              }
            })
          }else{
            this.$message.warning(res.message);
          }
        }).finally(() => {
          this.loading = false;
        })
      }
    },
  }
</script>